{{#error_message}}<div class="cm-error cm-{{element_type}}-error">{{error_message}}</div>{{/error_message}}
<div class="cm-store cm-front {{layout}}">
{{#features}}
<div class="cm-store featured-items">
	{{#features}}<div class="cm-store cm-item item-{{id}} featured cm-featured{{total_features}}">
		<div class="cm-item-image-container">
			<div class="cm-item-image" {{#image_url}}style="background-image:url({{image_url}});"{{/image_url}}></div>
		</div><!--cm-item-image-container-->
	<div class="cm-store cm-info cm-inner">
		<h2>{{name}}</h2>
		<span class="cm-itemprice">{{currency}}{{price}}{{#flexible_price}} {{copy_flexibleprice_suffix}}{{/flexible_price}}</span>
		<div class="cm-description">{{{description}}}</div>
		{{#is_available}}
		{{#attributes}}<select class="cm-attribute" name="{{name}}" data-key="{{key}}" data-itemid="{{id}}" data-totalattributes="{{attributes_count}}" data-attributeorder="{{attribute_index}}"><option value="resetattributes" {{#defaultcountermenu}}data-countermenu='{{defaultcountermenu}}'{{/defaultcountermenu}}>{{copy_choose_verb}} {{key}}</option>{{#items}}<option value="{{key}}" {{#countermenu}}data-countermenu='{{countermenu}}'{{/countermenu}}>{{key}}</option>{{/items}}</select>{{/attributes}}
		{{#flexible_price}}
		<span class="cm-store-flexible-price">
			<span class="cm-store-currency">{{currency}}</span>
			<input type="text" name="total_price" data-itemid="{{id}}" data-atleast="{{price}}" class="cm-price" value="{{price}}" />
		</span>
		{{/flexible_price}}
		<button type="button" data-itemid="{{id}}" data-price="{{price}}" class="button {{#has_variants}}cm-disabled{{/has_variants}} cm-addtocart cm-item-{{id}}"{{#has_variants}} disabled="disabled"{{/has_variants}}>{{#has_variants}}{{copy_choose_variants}}{{/has_variants}}{{^has_variants}}<span class="cm-price">{{currency}}{{price}}</span> - {{copy_cart}}{{/has_variants}}</button>
		{{/is_available}}
		{{^is_available}}
			<span class="cm-unavailable">
				{{copy_unavailable}}
			</span>
		{{/is_available}}
	</div>
	</div>{{/features}}
</div><!--featured-->
{{/features}}

<a href="#" class="cm-showcart"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="23.066px" height="20.783px" viewBox="0 0 23.066 20.783" enable-background="new 0 0 23.066 20.783" xml:space="preserve">
<g>
	<g>
		<path fill="#222" d="M17.667,4.75V2.6L14.9,0.25v4.5h-7V0.217l-2.633,2.3V4.75H0c0,0,0,11.4,0,13.267
			c0,1.867,2.533,2.767,2.533,2.767s15.8,0,17.8,0s2.733-2.667,2.733-2.667V4.75H17.667z M13.842,15
			c-0.274,0.2-2.365,2.007-2.367,2.258v0.009c0-0.25-2.081-2.066-2.356-2.267s-2.575-1.875-2.575-3.8
			C6.469,9.05,8.069,8.65,8.619,8.5c1.064-0.377,2.542,0.937,2.861,1.239c0.32-0.302,1.797-1.616,2.861-1.239
			c0.55,0.15,2.149,0.55,2.075,2.7C16.417,13.125,14.116,14.8,13.842,15z"/>
	</g>
	<rect x="8.2" fill="#222" width="6.366" height="2.45"/>
</g>
</svg> View cart</a>

<div class="cm-store unfeatured-items">
<div class="cm-store cm-info cm-inner">

	{{#items}}<div class="cm-store cm-item item-{{id}}">
		<div class="cm-item-image-container">
			<div class="cm-item-image" 		{{#image_url}}style="background-image:url({{image_url}});"{{/image_url}}></div>
		</div><!--cm-item-image-container-->
		<div class="cm-store cm-inner">
		<h2>{{name}}</h2>
		<span class="cm-itemprice">{{currency}}{{price}}{{#flexible_price}} {{copy_flexibleprice_suffix}}{{/flexible_price}}</span>
		<div class="cm-description">{{{description}}}</div>
		{{#is_available}}
		{{#attributes}}<select class="cm-attribute" name="{{name}}" data-key="{{key}}" data-itemid="{{id}}" data-totalattributes="{{attributes_count}}" data-attributeorder="{{index}}"><option value="resetattributes" {{#defaultcountermenu}}data-countermenu='{{defaultcountermenu}}'{{/defaultcountermenu}}>{{copy_choose_verb}} {{key}}</option>{{#items}}<option value="{{key}}" {{#countermenu}}data-countermenu='{{countermenu}}'{{/countermenu}}>{{key}}</option>
				{{/items}}</select>{{/attributes}}
		{{#flexible_price}}
		<span class="cm-store-flexible-price">
			<span class="cm-store-currency">{{currency}}</span>
			<input type="text" name="total_price" data-itemid="{{id}}" data-atleast="{{price}}" class="cm-price" value="{{price}}" />
		</span>
		{{/flexible_price}}
		<button type="button"{{^json_keys}} data-legacykeys="1"{{/json_keys}} data-itemid="{{id}}" data-price="{{price}}" class="button {{#has_variants}}cm-disabled{{/has_variants}} cm-addtocart cm-item-{{id}}"{{#has_variants}} disabled="disabled"{{/has_variants}}>{{#has_variants}}{{copy_choose_variants}}{{/has_variants}}{{^has_variants}}<span class="cm-price">{{currency}}{{price}}</span> - {{copy_cart}}{{/has_variants}}</button>
		{{/is_available}}
		{{^is_available}}
			<span class="cm-unavailable">
				{{copy_unavailable}}
			</span>
		{{/is_available}}
		</div>
	</div>{{/items}}
	</div>
</div><!--unfeatured-->

</form>

</div><!--cm-store cm-front-->

<script type="text/javascript">
	var cm = window.cashmusic;
	var cartpresent = false;
	var cartbuttonbusy = false;

	cm.events.add(cm,'ready', function(e) {
		cm.session.start();


		function flashCartButton() {
			if (cartpresent) {
				if (!cartbuttonbusy) {
					cm.styles.addClass('storage:cartbutton','cm-flash',true);
					cartbuttonbusy = true;
					setTimeout(function() {
						cm.styles.removeClass('storage:cartbutton','cm-flash',true);
						cartbuttonbusy = false;
					},2000);
				}
			} else {
				addCartButton();
			}
		}

		function addCartButton() {
			cm.overlay.addOverlayTrigger({"element":"{{element_id}}","endpoint":"{{public_url}}","state":"cart"},'cm-cartbutton cm-flash','cartbutton');
			cartbuttonbusy = true;
			setTimeout(function() {
				cm.styles.removeClass('storage:cartbutton','cm-flash',true);
				cartbuttonbusy = false;
			},2000);
			cartpresent = true;
		}

		// Bag icon by Mike Ashley for the Noun Project
		var css = ".cm-cartbutton {position:fixed;top:40px;right:40px;width:40px !important;height:40px !important;border-radius:40px !important;z-index:54321;cursor:pointer;background:#111 url(\"\") 50% 50% / cover no-repeat; background-size:80%;vertical-align:middle;}";
		   css += ".cm-cartbutton:hover{-webkit-animation: modalrotate ease-out 0.5s;-moz-animation: modalrotate ease-out 0.5s;animation: modalrotate ease-out  0.5s;}";
		   css += "@-webkit-keyframes flash {0% {-webkit-transform: scale(0.3);}50% { -webkit-transform: scale(1.1);}100% { -webkit-transform: scale(1);}}";
		   css += "@keyframes flash {0% {transform: scale(0.3);}50% {transform: scale(1.1);}100% {transform: scale(1);}}";
		   css += ".cm-flash{animation-name:flash;animation-duration: 1s;animation-timing-function: ease-out;animation-iteration-count: 1;-webkit-animation-name: flash;-webkit-animation-duration: 1s;-webkit-animation-timing-function: ease-out;-webkit-animation-iteration-count:1;}";
		cm.styles.injectCSS(css,false,true);

		{{#items_in_cart}}
			addCartButton();
		{{/items_in_cart}}

		// sort all the cart buttons
		var buttons = document.querySelectorAll('.cm-addtocart');
		if (buttons.length > 0) {
			for (var i = 0, len = buttons.length; i < len; i++) {
				cm.events.add(buttons[i],'click', function(e) {
					if (this.innerHTML != '{{copy_added}}') {
						var submitUrl = window.location.href.split('/embed/')[0]+'/payload';
						var poststring = 'cash_request_type=commerce&cash_action=addtocart&element_id={{element_id}}&item_id=' + this.getAttribute('data-itemid') + '&price=' + this.getAttribute('data-price');
						if (this.getAttribute('data-variantid')) {
							poststring += '&item_variant='+ encodeURIComponent(this.getAttribute('data-variantid'));
						}

						cm.ajax.send(submitUrl, poststring,
							function(r) {
								flashCartButton();
								var el = e.target;
								if(e.target.getAttribute('type') != 'button') {
									el = e.target.parentNode; // if the span is clicked use the button parent
								}
								var returnTxt = e.target.innerHTML;
								el.innerHTML = '{{copy_added}}';
								setTimeout(function() {
									el.innerHTML = returnTxt;
								},2200);
							}
						);
					}
					e.preventDefault();
					return false;
				});
			}
		}

		// view cart button
		var cartbuttons = document.querySelectorAll('.cm-cartbutton,.cm-showcart');
		if (cartbuttons.length > 0) {
			for (var i = 0, len = cartbuttons.length; i < len; i++) {
				cm.events.add(cartbuttons[i],'click', function(e) {
					cm.overlay.reveal({"element":"{{element_id}}","endpoint":"{{public_url}}","state":"cart"});
					e.preventDefault();
					return false;
				});
			}
		}

		// keep prices correct
		var prices = document.querySelectorAll('input.cm-price');
		if (prices.length > 0) {
			for (var i = 0, len = prices.length; i < len; i++) {
				cm.events.add(prices[i],'keyup', function(e) {
					var newprice = parseFloat(this.value);
					if (newprice) {
						if (newprice > this.getAttribute('data-atleast')) {
							var pricespan = document.querySelector('button.cm-addtocart.cm-item-' + this.getAttribute('data-itemid') + ' span.cm-price');
							if (pricespan) {
								pricespan.innerHTML = '{{currency}}' + newprice.toFixed(2);
							}
							document.querySelector('button.cm-addtocart.cm-item-' + this.getAttribute('data-itemid')).setAttribute('data-price',newprice.toFixed(2))
						}
					}
					e.preventDefault();
					return false;
				});

				cm.events.add(prices[i],'blur', function(e) {
					this.value = document.querySelector('button.cm-addtocart.cm-item-' + this.getAttribute('data-itemid')).getAttribute('data-price');
				});
			}
		}

		// i hate you, item variants
		// to clarify, i hate the dropdown logic not the variants.
		// the variants were lovingly crafted by @waferbaby and they're very nice
		var attributes = document.querySelectorAll('select.cm-attribute');
		if (attributes.length > 0) {
			for (var i = 0, len = attributes.length; i < len; i++) {
				cm.events.add(attributes[i],'blur', function(e) {
					var b = document.querySelector('button.cm-addtocart.cm-item-' + e.target.getAttribute('data-itemid'));

					if (e.target.getAttribute('data-totalattributes') > 1) {
						var allselects = e.target.parentNode.querySelectorAll('select');
						var otherselect = false;
						for (var ii = 0, l = allselects.length; ii < l; ii++) {
							if (allselects[ii] != e.target) {
								otherselect = allselects[ii];
								break;
							}
						}

						if (otherselect) {
							var supportedoptions = JSON.parse(e.target.options[e.target.selectedIndex].getAttribute('data-countermenu').replace('&apos;', '\''));
							var otheroptions = otherselect.querySelectorAll('option');
							for (var i = 0, len = otheroptions.length; i < len; i++) {
								otheroptions[i].setAttribute('disabled','disabled');
								if (otheroptions[i].value == 'resetattributes' || supportedoptions.indexOf(otheroptions[i].value) !== -1) {
									otheroptions[i].removeAttribute('disabled');
								}
							}
							if (e.target.value != 'resetattributes' && otherselect.value != 'resetattributes') {
								if (b.getAttribute('data-legacykeys')) {
									var thisid = e.target.getAttribute('data-key')+'->'+e.target.value;
									var otherid = otherselect.getAttribute('data-key')+'->'+otherselect.value;
									if (e.target.getAttribute('data-attributeorder') == 0) {
										var attributekey = thisid+'+'+otherid;
									} else {
										var attributekey = otherid+'+'+thisid;
									}
								} else {
									var attributekey = {};
									if (e.target.getAttribute('data-attributeorder') == 0) {
										attributekey[e.target.getAttribute('data-key').replace('&apos;', '\'')] = e.target.value.replace('&apos;', '\'');
										attributekey[otherselect.getAttribute('data-key').replace('&apos;', '\'')] = otherselect.value.replace('&apos;', '\'');
									} else {
										attributekey[otherselect.getAttribute('data-key').replace('&apos;', '\'')] = otherselect.value.replace('&apos;', '\'');
										attributekey[e.target.getAttribute('data-key').replace('&apos;', '\'')] = e.target.value.replace('&apos;', '\'');
									}
									attributekey = JSON.stringify(attributekey);
								}
								b.setAttribute('data-variantid',attributekey);
								b.removeAttribute('disabled');
								b.innerHTML = '<span class="cm-price">{{currency}}'+b.getAttribute('data-price')+'</span> - {{copy_cart}}';
							} else {
								b.removeAttribute('data-variantid');
								b.setAttribute('disabled','disabled');
								b.innerHTML = '{{copy_choose_variants}}';
							}
						}
					} else {
						if (e.target.value != 'resetattributes') {
							if (b.getAttribute('data-legacykeys')) {
								b.setAttribute('data-variantid',e.target.getAttribute('data-key')+'->'+e.target.value);
							} else {
								var attributekey = {};
	                     attributekey[e.target.getAttribute('data-key').replace('&apos;', '\'')] = e.target.value.replace('&apos;', '\'');
	                     attributekey = JSON.stringify(attributekey);
	                     b.setAttribute('data-variantid',attributekey);
							}
							b.removeAttribute('disabled');
							b.innerHTML = '<span class="cm-price">{{currency}}'+b.getAttribute('data-price')+'</span> - {{copy_cart}}';
						} else {
							b.removeAttribute('data-variantid');
							b.setAttribute('disabled','disabled');
							b.innerHTML = '{{copy_choose_variants}}';
						}
					}
				});
				cm.events.add(attributes[i],'change', function(e) {
					e.target.blur(); // using change to fire blur gives us change events consistently. ff doesn't do auto-blur, ios safari doesn't do change
				});
			}
		}

		function initiatePayment(f) {
			document.body.appendChild(f);
			cm.ajax.send(
				'{{public_url}}/request/payload',
				cm.ajax.encodeForm(f),
				function(details) {
					if (details.substring(0,4) == 'http') {
						top.location.href = details;
					} else if (details == 'success') {
						cm.overlay.reveal({"element":"{{element_id}}","endpoint":"{{public_url}}","state":"success"});
					} else {
						cm.overlay.reveal('There was a problem with your payment. Please try again.');
					}
				},
				function(details) {
					cm.overlay.reveal('There was a problem with your payment. Please try again.');
				}
			);
		}

		cm.events.add(cm, 'checkoutdata', function (payment) {
			var f = document.createElement('form');
			f.method = 'post';
			f.action = '';

			var els = ['cash_request_type','cash_action','element_id','shipping_price','total_price','shipping_info','paypal','stripe','origin','email_address','customer_name','geo','finalize_url'];
			for (var i = 0, len = els.length; i < len; i++) {
				var inp = document.createElement('input');
				inp.type = 'hidden';
				inp.name = els[i];
				inp.value = '';
				f.appendChild(inp);
			}

			f.cash_request_type.value = 'commerce';
			f.cash_action.value = 'initiatecheckout';
			{{#session_id}}f.session_id = '{{session_id}}';{{/session_id}}
			f.element_id.value = {{element_id}};
			f.origin.value = payment.detail.origin;
			f.email_address.value = payment.detail.email;
			f.customer_name.value = payment.detail.name;
			f.geo.value = cm.geo;
			if (cm.embedded) {
				if (cm.get['params']['location']) {
					f.finalize_url.value = cm.get['params']['location'];
				} else {
					f.finalize_url.value = window.location.href;
				}
			} else {
				f.finalize_url.value = top.location.href;
			}
			if (payment.detail.paypal) {
				f.paypal.value = 1;
			}
			if (payment.detail.stripe) {
				f.stripe.value = payment.detail.stripe;
			}

			// add shipping to form
			if (payment.detail.shipping) {
				f.shipping_info.value = JSON.stringify(payment.detail.shipping);
				if (payment.detail.shipping['shipping-region']) {
					var requesturl = '{{api_url}}/verbose/commerce/editcartshipping/element_id/{{element_id}}/region/' + payment.detail.shipping['shipping-region'] + '/';
					requesturl += '?ts=' + new Date().getTime();
					cm.ajax.send(requesturl, false,
						function() {
							initiatePayment(f);
						}
					);
				} else {
					initiatePayment(f);
				}
			} else {
				initiatePayment(f);
			}
		});

		{{#showsuccess}}
         cm.overlay.reveal({"element":"{{element_id}}","endpoint":"{{public_url}}","state":"success"});
      {{/showsuccess}}
	});
</script>
